
  <template>
  <div>
    <el-table
      ref="singleTable"
      @select="rowSelectChange"
      @select-all="pageSelectChange"
      @current-change="handleCurrentChange"
      @row-click="getCurrentRow"
      :data="data"
      border
      :highlight-current-row="config.sigleSelect"
      empty-text="暂无数据"
    >

      <el-table-column
        :selectable="config.selectable"
        v-if="!config.sigleSelect"
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        :align="item.align?item.align:'center'"
        :label=item.label
        :prop=item.prop
        :min-width="item.minWidth?item.minWidth:'120'"
        :formatter="item.formatter"
        v-for="(item,index) in config.itemList"
        :key="index"
      >
      </el-table-column>
      <slot name="操作">
      </slot>
    </el-table>
    <!-- 分页 -->
    <div style="text-align: right">
      <el-pagination
        :current-page="config.pageConfig.currentPage"
        :page-size="config.pageConfig.pageSize"
        :page-sizes="config.pageConfig.pageSizeList"
        :total="config.pageConfig.total"
        @current-change="currentPageChange"
        @size-change="pageSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin: 20px 0px"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: Array,
    config: Object,
    selectable: Function
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    handleCurrentChange(currentRow) {
      this.rowSelectChange([currentRow])
    },
    rowSelectChange(pageSelected, row) {
      this.$emit('selectionChange',
        pageSelected,
      )
    },
    pageSelectChange(pageSelected) {
      this.$emit('selectionChange', pageSelected)
    },
    toggleRowSelection(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    selectionChange(pageSelected) {
      this.$emit('selectionChange', pageSelected)
    },
    currentPageChange(newPage) {
      this.$emit('loadData',
        {
          currentPage: newPage
        }
      )
    },
    pageSizeChange(newPageSize) {
      this.$emit('loadData',
        {
          pageSize: newPageSize
        }
      )
    },
    getCurrentRow(row) {
      this.$emit('getCurrentRow', row)
    }
  }
}
</script>
<style scoped>
</style>